<template>
    <div class="all">
      <div class="head">
        <div class="headclick" @click="back">
          <el-icon>
            <ArrowLeft />
          </el-icon> 
          <span class="text-large font-600 mr-3">个人主页</span>
        </div>
        <div class="selfclick" @click="self">
          <img src="../../assets/user.png" style="width:25px;" />
        </div>
      </div>
      <div class="main">
          <el-card style="max-width: 480px">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>
          姓名：{{userAddapt.userName}}
          <br />
          ID:{{userAddapt.userID}}
          <br>
          
          <template #footer>
            <el-collapse v-model="activeNames">
              <el-collapse-item title="修改信息" name="1">
                <el-input disabled v-model="userAddapt.userID" />
                <el-input v-model="userAddapt.userName" clearable />
                <el-input v-model="userAddapt.password" clearable show-password />
                <el-popconfirm title="你确认要修改吗?" 
                @confirm="update">
                  <template #reference>
                    <el-button type="primary" >修改</el-button>
                  </template>
                </el-popconfirm>
              </el-collapse-item>
            </el-collapse>
          </template>
        
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ArrowLeft } from "@element-plus/icons-vue";
  import { useRoute, useRouter } from "vue-router";
  import { ref, inject } from "vue";
  import { User } from "@element-plus/icons-vue";
  import { h } from "vue";
  import { ElMessage } from "element-plus";
  const route = useRoute();
  const router = useRouter();
  const axios = inject("axios");
  const user = sessionStorage.getItem("user");
  const activeNames = ref(["0"]);
  let userobj = JSON.parse(user);
  let userdata = userobj._value;
  let userAddapt = ref({
    userName: "",
    userID: "",
    role: "",
    password: ""
  });
  const back = () => {
    router.go(-1);
  };
  const init = () => {
    axios
      .post("/Worker/getUserByID", {
        userID: userdata.userID,
        role: userdata.role
      })
      .then(response => {
        userAddapt.value = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  };
  init();
  const result = ref("");
  const update = () => {
    axios
      .post("/Worker/updateWorker", {
        userID: userAddapt.value.userID,
        userName: userAddapt.value.userName,
        password: userAddapt.value.password,
        role: userAddapt.value.role
      })
      .then(response => {
        result.value = response.data;
        if (result.value == "") {
          ElMessage({
            message: "修改成功",
            type: "success"
          });
        }
      })
      .catch(error => {
        console.log(error);
      });
  };
  </script>
  
  <style scoped>
  .head {
    display: flex;
    justify-content: space-between;
  }
  .main {
    margin: 60px;
  }
  </style>